<template>
	<view class="background"></view>
	<view class="card">
		<view class="top">
			<view class="title">
				{{ detail.name }}
			</view>
			<!-- <image src="@/static/ranking.png" mode=""></image> -->
		</view>
		<view class="body">
			<view class="left">
				<image src="@/static/logo.png"></image>
				<view>
					用户名
				</view>
			</view>
			<view class="right">
				<text>{{ detail.score }}</text>分
			</view>
		</view>
		<view class="table">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th width="20px" align="center">用时</uni-th>
					<uni-th width="20px" align="center">正确数</uni-th>
					<uni-th width="20px" align="center">正确率</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>
						<view class="time">
							{{ detail.exam_time }}分钟
						</view>
					</uni-td>
					<uni-td>
						<view class="count">
							{{ detail.correct }}题
						</view>
					</uni-td>
					<uni-td>
						<view class="correct">
							{{ detail.accuracy}}%
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<button class="wrong" @click="toWrong">查看答题解析</button>
	</view>
</template>

<script>
	import {
		examdetail
	} from '@/api/exam.js';
	import {
		exam
	} from '@/stores/exam.js';
	import {mixin} from '@/static/mixin.js'
	export default {
		mixins:[mixin],
		created() {
			this.wrong = exam();
		},
		onLoad: function(option) {
			let that = this;
			examdetail({
				id: option.id,
				is_remark: 1
			}).then(res => {
				that.detail = res;
			})
		},
		data() {
			return {
				wrong: '',
				detail: {},
			};
		},
		methods: {
			toWrong() {
				console.log(this.detail.remark_json.paper_data,"答案解析");
				this.wrong.setWrong(this.detail.remark_json.paper_data)
				uni.navigateTo({
					url: `/pages/exam/wrong/index?correct=${this.detail.correct}&wrong=${this.detail.wrong}`
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrong {
		transform: translateY(90px);
		background-color: $uni-color-primary;
		color: $uni-text-color-white;
	}

	.background {
		width: 100%;
		height: 30vh;
		background-color: $uni-color-primary;
		position: absolute;
		top: 0;
		z-index: 0;
	}

	.card {
		box-shadow: 1px 1px 10px #d1d1d1;
		border-radius: 5px;
		width: 90%;
		position: absolute;
		background-color: #ffffff;
		left: 50%;
		top: 25%;
		transform: translate(-50%, -50%);

		.body {
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;


			.left {
				display: flex;
				justify-content: left;
				align-items: center;

				view {
					font-weight: 700;
				}
			}

			.right {
				text {
					font-size: 30px;
					color: $uni-color-primary;
					margin-right: 5px;
					margin-left: 5px;
				}
			}

			image {
				border-radius: 50%;
				width: $uni-img-size-lg;
				height: $uni-img-size-lg;
				margin-right: 5px;
			}
		}

		.time,
		.count,
		.correct {
			text-align: center;

		}

		.time,
		.count {
			color: $uni-color-primary;
		}

		.correct {
			color: $uni-color-success;
		}

		.table {
			padding: 15px;
			margin-bottom: 20px;
		}

		.top {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			padding-bottom: 20px;
			border-bottom: 1px solid $uni-border-color;

			:deep(.uni-section__content-title) {
				font-size: 20px;
			}

			.title {
				box-sizing: border-box;
				padding: 5px;
				border-left: 3px solid $uni-color-primary;
				font-size: $uni-font-size-lg;
			}

			image {
				width: 30px;
				z-index: 1;
				height: 30px;
			}
		}
	}
</style>
